<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>确认订单-DeathGhost</title>
		<meta name="keywords" content="DeathGhost,DeathGhost.cn,web前端设,移动WebApp开发" />
		<meta name="description" content="DeathGhost.cn::H5 WEB前端设计开发!" />
		<meta name="author" content="DeathGhost" />
		<link href="style/style.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="js/public.js"></script>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jqpublic.js"></script>

		<!--
Author: DeathGhost
Author URI: http://www.deathghost.cn
-->
	</head>

	<body>
		<input type="hidden" value="${foodId}" />
		<header>
			<section class="Topmenubg">
				<div class="Topnav">
					<div class="LeftNav">
						<a href="register.html">注册</a>/
						<a href="login.html">登录</a>
						<a href="#">QQ客服</a>
						<a href="#">微信客服</a>
						<a href="#">手机客户端</a>
					</div>
					<div class="RightNav">
						<a href="user_center.html">用户中心</a>
						<a href="user_orderlist.html" target="_blank" title="我的订单">我的订单</a>
						<a href="cart.html">购物车（0）</a>
						<a href="user_favorites.html" target="_blank" title="我的收藏">我的收藏</a>
						<a href="#">商家入驻</a>
					</div>
				</div>
			</section>
			<div class="Logo_search">
				<div class="Logo">
					<img src="images/logo.jpg" title="DeathGhost" alt="模板">
					<i></i>
					<span>西安市 [ <a href="#">莲湖区</a> ]</span>
				</div>
				<div class="Search">
					<form method="get" id="main_a_serach" onsubmit="return check_search(this)">
						<div class="Search_nav" id="selectsearch">
							<a href="javascript:;" onClick="selectsearch(this,'restaurant_name')" class="choose">餐厅</a>
							<a href="javascript:;" onClick="selectsearch(this,'food_name')">食物名</a>
						</div>
						<div class="Search_area">
							<input type="search" id="fkeyword" name="keyword" placeholder="请输入您所需查找的餐厅名称或食物名称..." class="searchbox" />
							<input type="submit" class="searchbutton" value="搜 索" />
						</div>
					</form>
					<p class="hotkeywords">
						<a href="#" title="酸辣土豆丝">酸辣土豆丝</a>
						<a href="#" title="这里是产品名称">螃蟹炒年糕</a>
						<a href="#" title="这里是产品名称">牛奶炖蛋</a>
						<a href="#" title="这里是产品名称">芝麻酱凉面</a>
						<a href="#" title="这里是产品名称">滑蛋虾仁</a>
						<a href="#" title="这里是产品名称">蒜汁茄子</a>
					</p>
				</div>
			</div>
			<nav class="menu_bg">
				<ul class="menu">
					<li>
						<a href="index.html">首页</a>
					</li>
					<li>
						<a href="list.html">订餐</a>
					</li>
					<li>
						<a href="category.html">积分商城</a>
					</li>
					<li>
						<a href="article_read.html">关于我们</a>
					</li>
				</ul>
			</nav>
		</header>
		<!--Start content-->
		<section class="Psection MT20" id="Cflow">
			<!--如果用户未添加收货地址，则显示如下-->
			<div class="confirm_addr_f">
				<span class="flow_title">收货地址：</span>
				<!--如果未添加地址，则显示此表单-->
				<form class="add_address" action="#" style="display:none;">
					<p><i>收件人姓名：</i><input type="text" name="" required></p>
					<p>
						<i>选择所在地：</i>
						<select name="">
							<option>陕西省</option>
						</select>
						<select name="">
							<option>西安市</option>
						</select>
						<select name="">
							<option>莲湖区</option>
						</select>
					</p>
					<p><i>街道地址：</i><input type="text" required size="50"></p>
					<p><i>邮政编码：</i><input type="text" required size="10" pattern="[0-9]{6}"></p>
					<p><i>手机号码：</i><input type="text" name="" required pattern="[0-9]{11}"></p>
					<p><i></i><input name="" type="submit" value="确定"></p>
				</form>
				<!--已保存的地址列表-->
				<form id="foodCar1" action="#">
					<ul id="address" class="address">
						<!--<li id="style1"><input type="radio" value="" id="1" name="rdColor" onclick="changeColor(1)"/><label for="1"> 浙江省 杭州市 余杭区 航海路1588号（孙先生收）<span class="fontcolor">183092***73</span></label></li>
    <li id="style2"><input type="radio" value="" id="2" name="rdColor" onclick="changeColor(2)"/><label for="2"> 陕西省 西安市 雁塔区 丈八路22号（孙先生收）<span class="fontcolor">183092***73</span></label></li>
    <li><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"><img src="images/newaddress.png"/></a></li>-->
					</ul>
				</form>
				<!--add new address-->
				<form action="#">
					<div id="light" class="O-L-content">
						<ul>
							<li><span><label for="">选择所在地：</label></span>
								<p><em>*</em>
									<select name="">
										<option>陕西省</option>
									</select>
									<select name="">
										<option>西安市</option>
									</select>
									<select name="">
										<option>雁塔区</option>
									</select>
								</p>
							</li>
							<li><span><label for="">邮政编码：</label></span>
								<p><em>*</em><input name="" type="text" class="Y_N" pattern="[0-9]{6}" required></p>
							</li>
							<li><span><label for="">街道地址：</label></span>
								<p><em>*</em><textarea name="" cols="80" rows="5"></textarea></p>
							</li>
							<li><span><label for="">收件人姓名：</label></span>
								<p><em>*</em><input name="" type="text"></p>
							</li>
							<li><span><label for="">手机号码：</label></span>
								<p><em>*</em><input name="" type="text" pattern="[0-9]{11}" required></p>
							</li>
							<div class="button-a"><input type="button" value="确 定" class="C-button" />
								<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"><span><input name="" type="button" value="取 消"  class="Cancel-b"/></a></div>
    <div class="close-botton"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"></a></div>
   </div> 
   <div id="fade" class="overlay"></div>
    </ul>
    
   <!--End add new address-->
   </form>
 </div>
<!--配送方式及支付，则显示如下-->
<!--check order or add other information-->
 <div class="pay_delivery">
  <span class="flow_title">配送方式：</span>
									<table>
										<th width="30%">配送方式</th>
										<th width="30%">运费</th>
										<th width="40%">说明</th>
										<tr>
											<td>送货上门</td>
											<td>￥0.00</td>
											<td>无运费</td>
										</tr>
									</table>
									<!--<span class="flow_title">在线支付方式：</span>
									<form action="#">
										<ul>
											<li><input type="radio" name="pay" id="alipay" value="alipay" /><label for="alipay"><i class="alipay"></i></label></li>
										</ul>
									</form>-->
							</div>
							<form id="foodCar0" action="#">
								<div class="inforlist">
									<span class="flow_title">商品清单</span>
									<table id="foodCar">

									</table>
									<div class="Order_M">
										<p><em>订单附言:</em><input name="" type="text"></p>
										<p><em>优惠券:</em>
											<select id="coupon" name="">

											</select>
										</p>
									</div>
									<div class="Sum_infor">
										<p class="p1"></p>
										<p class="p2"></p>
										<input type="button" style="display: none" id="sub" value="提交订单" / class="p3button">
										<input type="button" disabled="true" style="background-color: #555555;" id="sub3" value="提交订单" / class="p3buttons">
									</div>
								</div>
							</form>
					</div>
		</section>
		<!--<script>
			//Test code,You can delete this script /2014-9-21DeathGhost/
			$(document).ready(function() {
				var submitorder = $.noConflict();
				submitorder(".p3button").click(function() {
					submitorder("#Cflow").hide();
					submitorder("#Aflow").show();
				});
			});
		</script>-->
		<style>
			.p3buttons {
				font-size: 14px;
				font-weight: bold;
				width: 120px;
				height: 45px;
				line-height: 45px;
				background: #ff0000;
				display: block;
				text-align: center;
				color: #fff;
				border-radius: 5px;
				margin-top: 15px;
				float: right;
			}
		</style>
		<section class="Psection MT20 Textcenter" style="display:none;" id="Aflow">
			<!-- 订单提交成功后则显示如下 -->
			<p class="Font14 Lineheight35 FontW">恭喜你！订单提交成功！</p>
			<!--			<p class="Font14 Lineheight35 FontW">您的订单编号为：<span class="CorRed">201409205134</span></p>
-->
			<p class="Font14 Lineheight35 FontW">共计金额：<span class="CorRed"></span></p>
			<p>
				<!--<button type="button" class="Lineheight35"><a href="#" target="_blank">支付宝立即支付</a></button>--><button type="button" class="Lineheight35"><a href="user_center.html">进入用户中心</button></p>
		</section>
		<!--End content-->
		<div class="F-link">
			<span>友情链接：</span>
			<a href="http://www.htmlsucai.com" target="_blank" title="DeathGhost">DeathGhost</a>
			<a href="http://www.htmlsucai.com" target="_blank" title="免费后台管理模板">绿色清爽版通用型后台管理模板免费下载</a>
			<a href="http://www.htmlsucai.com" target="_blank" title="果蔬菜类模板源码">HTML5果蔬菜类模板源码</a>
			<a href="http://www.htmlsucai.com" target="_blank" title="黑色的cms商城网站后台管理模板">黑色的cms商城网站后台管理模板</a>
		</div>
		<footer>
			<section class="Otherlink">
				<aside>
					<div class="ewm-left">
						<p>手机扫描二维码：</p>
						<img src="images/Android_ico_d.gif">
						<img src="images/iphone_ico_d.gif">
					</div>
					<div class="tips">
						<p>客服热线</p>
						<p><i>1830927**73</i></p>
						<p>配送时间</p>
						<p><time>09：00</time>~<time>22:00</time></p>
						<p>网站公告</p>
					</div>
				</aside>
				<section>
					<div>
						<span><i class="i1"></i>配送支付</span>
						<ul>
							<li>
								<a href="article_read.html" target="_blank" title="标题">支付方式</a>
							</li>
							<li>
								<a href="article_read.html" target="_blank" title="标题">配送方式</a>
							</li>
							<li>
								<a href="article_read.html" target="_blank" title="标题">配送效率</a>
							</li>
							<li>
								<a href="article_read.html" target="_blank" title="标题">服务费用</a>
							</li>
						</ul>
					</div>
					<div>
						<span><i class="i2"></i>关于我们</span>
						<ul>
							<li>
								<a href="article_read.html" target="_blank" title="标题">招贤纳士</a>
							</li>
							<li>
								<a href="article_read.html" target="_blank" title="标题">网站介绍</a>
							</li>
							<li>
								<a href="article_read.html" target="_blank" title="标题">配送效率</a>
							</li>
							<li>
								<a href="article_read.html" target="_blank" title="标题">商家加盟</a>
							</li>
						</ul>
					</div>
					<div>
						<span><i class="i3"></i>帮助中心</span>
						<ul>
							<li>
								<a href="article_read.html" target="_blank" title="标题">服务内容</a>
							</li>
							<li>
								<a href="article_read.html" target="_blank" title="标题">服务介绍</a>
							</li>
							<li>
								<a href="article_read.html" target="_blank" title="标题">常见问题</a>
							</li>
							<li>
								<a href="article_read.html" target="_blank" title="标题">网站地图</a>
							</li>
						</ul>
					</div>
				</section>
			</section>
			<div class="copyright">(c) 版权所有 2016 DeathGhost 技术支持：
				<a href="http://www.htmlsucai.com" title="DeathGhost">DeathGhost</a>
			</div>
		</footer>
	</body>
	<script type="text/javascript" src="/webjars/jquery/3.4.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function() {

			//地址id
			var addressId;
			//判断提交按钮
			/*function btn() {
				if($(".addressId").prop("checked")) {

				}
			}*/
			//刷新优惠劵
			$.ajax({
				url: "/order/conpon",
				type: "get",
				dadaType: "json",
				success: function(data) {
					$("#coupon").html("")
					$("#coupon").append($("<option value='-1'></option>").html(""))
					$.each(data, function(index, val) {
						$.each(val.couponList, function(index, v) {
							$("#coupon").append($("<option></option>").val(v.id).html("￥" + v.discountMoney + "元优惠券"))
						});
					});
				}
			})
			//优惠劵点击事件
			$("#coupon").on("click", function() {
				jstotal();
			})
			//刷新地址表
			$.ajax({
				type: "get",
				url: "/order/address",
				dataType: "json",
				success: function(data) {
					$.each(data, function(index, v) {
						$("#address").append($("<li id='style'" + v.id + "></li>")
							.append($("<input type='radio' id='" + v.id + "' class='addressId' name='addressId' onclick='changeColor(1)'/>").val(v.id)).click(function() {
								addressId = v.id;
								$("#sub3").css("display", "none");
								$("#sub").css("display", "block");
							})
							.append($("<label for='" + v.id + "'></label>").html(v.province + " " + v.city + " " + v.district + " " + v.address + " " + v.username + "收")))

					});
					$("#address").append(
						$("<li></li>").append(
							$('<a  href = "javascript:void(0)"></a>').click(function() {
								$("#light").css("display", "block");
								$("#fade").css("display", "block");
							}).append($("<img src='images/newaddress.png'/>"))
						)
					);

				}
			});

			//食品总金额
			var foodtotal = 0;
			var total = 0;

			//计算总金额
			function jstotal() {
				var coupon = $("#coupon").val()
				if(coupon == null || coupon == -1) {
					$(".p1").html("配送费用：￥0.00+商品费用：￥" + foodtotal);
					total = foodtotal;
					$(".p2").html("合计：<span>￥" + total + ".00</span>");
				} else {
					$.ajax({
						url: "/order/conpon",
						type: "get",
						dadaType: "json",
						success: function(data) {
							$.each(data, function(index, val) {
								$.each(val.couponList, function(index, v) {
									if(coupon == v.id) {
										$(".p1").html("配送费用：￥0.00+商品费用：￥" + foodtotal + "-优惠券：￥" + v.discountMoney);
										total = foodtotal - v.discountMoney;
										$(".p2").html("合计：<span>￥" + total + ".00</span>");
									}
								})
							})
						}

					})
				}
				$(".CorRed").html("￥" + total + ".00")

			}
			//将购物车中的食品显示到订单中
			$.ajax({
				url: "/car/lookCar",
				type: "get",
				dataType: "json",
				success: function(data) {
					$("#foodCar").html("")
					$("#foodCar").html("<th>名称</th><th>数量</th><th>价格</th><th>小计</th>")
					$.each(data, function(index, v) {
						$.each(v.foodList, function(num, val) {
							$("#foodCar").append($("<tr></tr>")
								.append($("<td></td>").html(val.title))
								.append($("<td></td>").html(val.foodNum))
								.append($("<td></td>").html("￥" + val.sellPrice))
								.append($("<td></td>").html("￥" + val.foodNum * val.sellPrice))
							)
							//计算食品总金额
							foodtotal = foodtotal + (val.foodNum * val.sellPrice);
						})

					});
					jstotal();
				}
			})
			//优惠劵事件
			$("#coupon").on("click", function() {
				jstotal();
			})
			//提交订单
			$("#sub").on("click", function() {
				$.ajax({
					type: "post",
					url: "/car/jsOrder",
					data: {
						"couponId": $("#coupon").val(),
						"totalMoney": total,
						"addressId": addressId
					},
					dataType: "json",
					success: function(data) {
						alert(1)
					}
				});
				$("#Cflow").css("display","none");
				$("#Aflow").css("display","block");
			});

			//jstotal();

		})
	</script>

</html>